<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css">


</head>
<body>
    <div id="app">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <table class="table table-bordered">
                        <tr>
                            <th><input type="checkbox" v-model="all">全选</th>
                            <th>商品</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>小计</th>
                            <th>操作</th>
                        </tr>
                        <tr v-for="product in products">
                            <td><input type="checkbox" v-model="product.isSelected"></td>
                            <td>{{product.name}}</td>
                            <td>{{product.price}}</td>
                            <td><input type="text" v-model="product.count"></td>
                            <td>{{product.price * product.count}}</td>
                            <td><button class="btn btn-danger" @click="remove(product)">删除</button></td>
                        </tr>
                        <tr>
                            <td colspan="6">
                                总价:{{total}}
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

        </div>
    </div>

</body>
<script src="../node_modules/vue/dist/vue.js"></script>
<script>
    let vm =  new Vue({
        el: '#app',
        data:{
            products:JSON.parse(localStorage.getItem('products'))||[
                {isSelected:true,price:30,count:1,name:'test1'},
                {isSelected:false,price:30,count:2,name:'test2'},
                {isSelected:true,price:30,count:3,name:'test3'}
            ]
        },
        computed:{
            all:{
                get(){
                    return this.products.every(item=>item.isSelected);
                },
                set(val){
                    this.products.forEach(item=>item.isSelected = val);
                }
            },
            total(){
                return this.products.reduce((prev,next)=>prev+next.price*next.count,0);
            }

        },
        methods:{
            remove(pro){
                this.products = this.products.filter((item)=>item!==pro)
            }
        },
        watch:{
            products:{
                handler(){
                    localStorage.setItem('products',JSON.stringify(this.products));
                },deep:true

            }
        }
    })


</script>
</html>